<template>
  <div class="dialog-footer">
    <el-row>
      <slot name="start"></slot>
      <span class="end">
        <slot></slot>
        <el-button @click="cancel" v-show="showCancle">{{ cancelText }}</el-button>
        <el-button type="primary" @click="ok" :disabled="okDisabled" v-show="showOk">{{
          okText
        }}</el-button>
        <slot name="end"></slot>
      </span>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'DialogFooter',
  props: {
    // OK按钮文字
    okText: {
      type: String,
      required: false,
      default: '确 定'
    },
    // cancel按钮文字
    cancelText: {
      type: String,
      required: false,
      default: '取 消'
    },
    // OK按钮禁用
    okDisabled: {
      type: Boolean,
      required: false,
      default: false
    },
    showOk: {
      type: Boolean,
      required: false,
      default: true
    },
    showCancle: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  methods: {
    ok() {
      this.$emit('ok')
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: left;
  .end {
    position: relative;
    // float: right;
    margin-left: auto;
  }
}
</style>
